Axios 封装(拦截器)
Axios 封装(拦截器)、api 接口统一封装,提高代码复用性、可维护性。
安装 axios、qs
npm install qs axios --save
- 新建 config 配置文件
const dev = process.env.NODE_ENV
const isDev = dev === 'development'
const baseUrlList = {
'development': '开发环境地址',
'production': '生产环境地址'
}
const baseURL = baseUrlList[dev]
export {
baseURL, // 请求地址前缀
isDev, // 用于全局环境判断依据
dev
}
- 新建 request 文件,封装 axios 的请求,回调统一处理。
// api/request.js
import axios from 'axios'
import qs from 'qs';
import {
baseURL
} from '@/config'
const instance = axios.create({
// 更多配置信息,可从文章结尾处文档查询
baseURL, // axios 请求地址前缀
timeout: 50000 // 请求超时时间(毫秒)
})
// 请求拦截器
instance.interceptors.request.use((config) => {
// 请求前的数据处理
// 默认 request payload 传参,此处判断data传参方式
if (config.type === "formData") {
config.data = qs.stringify(config.data);
}
return config;
}, (error) => {
// 处理请求错误
return Promise.reject(error);
});
// 响应请求的拦截器
instance.interceptors.response.use((res) => {
// 对回调数据进行处理
if(res.status === 200){
return Promise.resolve(res.data);
} else {
return Promise.reject(res);
}
}, (error) => {
// 处理请求回调错误
return Promise.reject(error);
});
export default (url, data = {}, method = 'post', type = 'formData') => {
let options = {
url,
method,
data,
header
}
if (type === 'formData') Object.assign(options, {
type: 'formData'
})
// 用于upload
if (type === 'form') {
const form = new FormData()
for (let i in data) {
form.append(`${i}`, data[i])
}
options.data = form
}
return instance(options)
}
// api/user.js
import service from './request'
export const login = data => {
return service('login', data)
}
Powered by Waline v2.15.8